<template>
	<!-- 案件分配 -->
	<view class="">
		<view class="main">
			<view class="top-item">
				<text class="top-item-title">案件编号</text>
				<input type="text"
				v-model="code"
				value="code"
				placeholder="请输入" class="placeholder-view" disabled/>
			</view>
			<view class="top-item">
				<text class="top-item-title">承办律师</text>
				<text class="star">*</text>
				<input type="text"
						v-model="lawer"
						@input="searchPeople"
						maxlength="11"
						placeholder="输入律师姓名/手机号" 
						class="placeholder-view"
						confirm-type="search">
			</view>
			
			<scroll-view  scroll-y="true" class="laywer-sel-popup" v-if="searchList1.length>0">
				<view v-for="(item,index) in searchList1" :key="index" @click="clickLawyer(item)" 
				style="height: 80rpx;display: flex;align-items: center;margin-left: 32rpx;">
					<image :src="item.avatarPic"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>
			
					<text class="listview-name" style="margin-left: 2rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					
				</view>
			</scroll-view>
			
			<view class="listview">
				<view :class="index%2==1 ? 'main_item2':'main_item'" v-for="(item,index) in nameList">
					<image :src="item.avatarPic"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>
					
					<text class="listview-name" style="margin-left: 2rpx;width: 100rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					<image @click="deleteLayer(item,index)" src="../../../../static/phone/guanbi1.png"
						style="width: 32rpx;height: 32rpx;margin-left: auto;margin-right: 4rpx;"></image>
				</view>
				
			</view>
			
			
			
			<view class="top-item">
				<text class="top-item-title">参与用户</text>
				<input type="text"
						v-model="customer"
						@input="searchPeople2"
						maxlength="11"
						placeholder="输入用户手机号" 
						class="placeholder-view"
						confirm-type="search">
				
			</view>
			
			<scroll-view  scroll-y="true" class="laywer-sel-popup" v-if="searchList2.length>0">
				<view v-for="(item,index) in searchList2" :key="index" @click="clickCustomer(item)" 
				style="height: 80rpx;display: flex;align-items: center;margin-left: 32rpx;">
					<image :src="item.avatarPic"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>
				
					<text class="listview-name" style="margin-left: 2rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					
				</view>
			</scroll-view>
			
			
			
			<view class="listview">
				<view :class="index%2==1 ? 'main_item2':'main_item'" v-for="(item,index) in dataList">
					<image :src="item.avatarPic"
					style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>
					
					<text class="listview-name" style="margin-left: 2rpx;width: 100rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					<image @click="deleteBind(item,index)" src="../../../../static/phone/guanbi1.png"
						style="width: 32rpx;height: 32rpx;margin-left: auto;margin-right: 4rpx;"></image>
				</view>
				
			</view>
			
		</view>
		
		<!-- 底部 -->
		<view class="view-bottom">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="operate">
					确定
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	import verify from '../../../utils/verifyUtils.js'
	let app = ''
	export default{
		data(){
			return{
				code:'',
				role:'',
				roleUrl:'',
				dataList: [],//绑定用户
				nameList: [],//常用律师
				lawer:'',
				customer:'',
				searchList1:[],
				searchList2:[],
			}
		},
		onLoad(options) {
			let _this = this
			app = getApp()
			_this.role = app.globalData.role
			_this.roleUrl =  _this.$roleUrl({tab:_this.role})
			_this.id = options.id
			_this.code = options.no
		},
		onShow() {
			
		},
		mounted() {
			
		},
		methods:{
			/**
			 * 提交
			 */
			async operate(){
				let _this = this
				if(_this.nameList.length===0){
					uni.showToast({
						title:'承办律师不能为空!',
						icon:"none"
					})
					return
				}
				
				
				uni.showLoading({
					title:'正在提交...'
				})
				let data = {
					caseId:_this.id
				}
				if(_this.nameList.length>0){
					let lawyerIds = []
					for (var i = 0; i < _this.nameList.length; i++) {
						lawyerIds.push(_this.nameList[i]['id'])
					}
					_this.$set(data, 'lawyerIds', lawyerIds);			
				}
				
				if(_this.dataList.length>0){
					let userIds = []
					for (var i = 0; i < _this.dataList.length; i++) {
						userIds.push(_this.dataList[i]['id'])
					}
					
				
					_this.$set(data, 'userIds', userIds);
							
				}
				
				
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseUser/usersAndLawyers/0`,
					data: data,
					method: 'POST', //默认是GET
				})
				console.log('分配结果',res)
				if(res.data.code==200){
					
					uni.showModal({
						title:'提示',
						content:'分配成功!',
						showCancel:false,
						success: (res) => {
							_this.$EventBus.$emit('refresh')
							uni.navigateBack({
								delta:-1
							})
						}
					})
					
				}
				
				
				
			
			},
			/**
			 * 参与律师
			 */
			searchPeople(val){
				let _this = this
				let code = val.detail.value
				//查询律师选择器
				_this.getLawyerNameList(code)
			},
			async getLawyerNameList(code){
				console.log(code)
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/lawyer/selector`,
					data: {
						keyword:code,
						// size: 1000,
						// page: 1
					},
					method: 'POST', //默认是GET
				})
				console.log('律师', res)
				_this.searchList1 = []
				if (res.data.code == 200) {
					let list = res.data.data
					
					
					for (var i = 0; i < list.length; i++) {
						let icons = list[i]['account']['avatarPic']
						
						console.log('承办律师头像',icons)
						if(verify.isNotEmpty(icons)){
							if(icons.indexOf('http')<0){
								icons = this.$imageUrls({picUrls: icons})
							}
						}else{
							icons = '../../../../static/phone/moren.png'
						}
						
						list[i]['avatarPic'] = icons
					}

					_this.searchList1 = list
				}
			},
			
			
			/**
			 * 绑定用户
			 */
			searchPeople2(val){
				console.log(val)
				let _this = this
				let code = val.detail.value
				//查询律师选择器
				_this.getCustomerNameList(code)
			},
			async getCustomerNameList(code){
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/commUser/selector/0`,
					data: {
						keyword:code,
						// size: 1000,
						// page: 1
					},
					method: 'POST', //默认是GET
				})
				// console.log('用户', res)
				_this.searchList2 = []
				if (res.data.code == 200) {
					let list = res.data.data
					
					for (var i = 0; i < list.length; i++) {
						let icons = list[i]['account']['avatarPic']
						
						if(verify.isNotEmpty(icons)){
							if(icons.indexOf('http')<0){
								icons = this.$imageUrls({picUrls: icons})
							}
						}else{
							icons = '../../../../static/phone/moren.png'
						}
						
									
						list[i]['avatarPic'] = icons
					}
					
					
					
					_this.searchList2 = list
				}
			},
			
			
			
			//选择
			clickLawyer(item){
				let _this = this
				for (var i = 0; i < _this.nameList.length; i++) {
					if(item.account.id == _this.nameList[i]['account'].id){
						uni.showToast({
							title:'当前律师已存在!',
							icon:'none'
						})
						
						return
					}
				}
				
				this.nameList.push(item)
				this.searchList1 = []
				this.lawer = ''
			},
			clickCustomer(item){
				let _this = this
				for (var i = 0; i < _this.dataList.length; i++) {
					if(item.account.id == _this.dataList[i]['account'].id){
						uni.showToast({
							title:'当前用户已存在!',
							icon:'none'
						})
						
						return
					}
				}
		
				this.dataList.push(item)
				this.searchList2 = []
				this.customer = ''
			},
			
	
			/**
			 * 删除绑定用户
			 */
			deleteBind(item, index){
				this.dataList.splice(index, 1)
			},
			
			
			/**
			 * 删除常用律师
			 */
			deleteLayer(item, index) {
				this.nameList.splice(index, 1)
			},
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.main{
		padding-left: 32rpx;
		padding-right: 32rpx;
	}
	.top-item{
		height: 108rpx;
		border-bottom: 1rpx #eeeeee solid;
		display: flex;
		align-items: center;
	}
	.top-item-title{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.placeholder-view{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: auto;
		text-align: right;
	}
	
	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	
	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
	}
	
	.view-bottom-b {
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}
	.star{
		
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF6132;
		margin-left: 4rpx;
	}
	.listview{
		display: flex;
		flex-wrap: wrap;
		
	}
	
	
	.main_item{
		width: 336rpx;
		height: 88rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}
	.main_item2{
		width: 336rpx;
		height: 88rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		margin-left: 14rpx;
	}
	.listview-name{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	
	
	.laywer-sel-popup{
		height: 330rpx;
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
		border-radius: 2px;
	}
</style>